﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>物理拓扑全局预览</title>
	<link rel="stylesheet" href="./css/css.css">
	<link rel="stylesheet" href="./css/leftBar.css">
	<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
	<link type="text/css" rel="Stylesheet" href="./css/nmc.css" />
	<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="./js/messagecenter.js"></script>
	<script type="text/javascript" src="./js/common.js"></script>
	<script type="text/javascript" src="./js/canvas4.js"></script>
	<script type="text/javascript" src="./js/calc.js"></script>
	<style type="text/css">
		.app_text{
			color:#04A0E9;
		}
		.page-split input{
			display:inline;
			margin:0px 4px;
		}

	</style>
	<script>
        function lineEvent1(){}
        function lineEvent2(){}
        
        function  iconEvent4(obj){

        }
	</script>
</head>
<body>
<div class="left_content">
	<div class="left_block1">
		<div class="left_logo"></div>
		<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
		<div class="left_icons">
			<div class="left_icon1"></div>
			<div class="left_icon2"></div>
			<div class="left_icon3"></div>
		</div>
	</div>
	<div class="left_block2">
		<div class="left_menu" onclick="window.location.href='physical_topology_library';" style="background-color:#04A0E9;color:#FFFFFF;border-top:1px solid #FFFFFF;">拓扑文件库</div>
		<div class="left_menu" onclick="window.location.href='logical_application_library';">逻辑预案库</div>
		<div class="left_menu" onclick="window.location.href='deploy_topology_library';">部署库</div>
		<div class="left_menu monitor">监控</div>
		<div class="left_menu level2" >
			<div class="level2Border" onclick="window.location.href='physical_monitors';">
				物理监控
			</div>
		</div>
		<div class="left_menu level2" >
			<div class="level2Border" onclick="window.location.href='logical_monitors';">
				逻辑监控
			</div>
		</div>
		<div class="left_menu other">其他</div>
		<div class="left_menu  level22" >
			<div class="level22Border" onclick="window.location.href='commonCMD';">
				我的常用命令
			</div>
		</div>
		<div class="left_menu level22" >
			<div class="level22Border" onclick="window.location.href='generalCMD';">
				命令模板
			</div>
		</div>
	</div>
	<form th:action="@{/logout}" method="post" >
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
			<button class="bigmoniter" type="button" onclick="showBig();" style="cursor:pointer;">大屏监控</button>
			<button class="login"  type="submit">注销</button>
		</div>
	</form>
</div>
<div class="right_content" >
	<form id="form1">
		<input type="hidden" id="curId" name="curId">
		<!-- 头部 -->
		<div class="top-bar">
			<button  class="b6" type="button" onclick="back();">返回</button>
			<button  class="b6" type="button" onclick="saveAll();" style="margin-right:75px;">保存</button>
			<!--button  class="b6" type="button" onclick="viewStraight();" style="margin-right:395px;">直线</--button>-->
			<button  class="b6" type="button" onclick="viewOld();" style="margin-right:320px;">真实大小</button>
			<button  class="b6" type="button" onclick="viewBig();" style="margin-right:235px;">放大</button>
			<button  class="b6" type="button" onclick="showSmall();" style="margin-right:160px;">缩小</button>
		</div>

		<!-- 左侧 -->
		<div class="table-box" style="overflow-x:auto;">

		</div>

	</form>
</div>
</body>

<script type="text/javascript">

var canvasData = {x:0 , y:0, width:Math.ceil(window.innerWidth-325), height:Math.ceil(window.innerHeight-52)};
init_canvas(canvasData ,3,lineEvent1 , lineEvent2 ,lineSelect,null,null,curdragCircle);//初始化
/*addList();*/
drawCircles();
	var straightLines=[];
    var returnUrl = "[[${returnUrl}]]";
    var id = [[${id}]];
    var phyname = '[[${phyname}]]';
    var hasIndexData=true;
    var oldData=null;
    var Polylines=[];
    var oldPolyLInes=[];
    var allIndexData=null;
    //查询是否有位置数据
    function positionData(){
    	 $.ajax({
             url : '[[@{/view_position/query_topology}]]',
             data: {"topologyId":id,"topologyType":phyname},
             dataType:"JSON",
             async:false, 
             type:"POST"
         }).done(function(indexdata){
             if(indexdata.data){
                  allIndexData=indexdata.data;
             }
         });
    }
 $.post('[[@{/physical_topology/get_by_id}]]',{id:id},"JSON").done(function(res){
      if(res){
    	  //获取位置信息
    	  positionData();
    	  
          var data = res.data;
          oldData=data;
          var machineBoxes = data.machineBoxes;
          if(machineBoxes&&machineBoxes.length>0){
              $.each(machineBoxes,function(k,v){
                 addCanvasLevel1(k,v);
                  var boards = v.boards;
                  if(boards&&boards.length>0){
                      $.each(boards,function(k1,v1){
                      	v1.machineBoxId=v.id;
                         addCanvasLevel2(k ,k1,v1);
                         
                          var cpus = v1.cpus;
                          if(cpus&&cpus.length>0){
                              $.each(cpus,function(k2,v2){
                              	var img ;
                              	v2.machineBoxId=v.id;
                              	v2.boardId=v1.id;
                              	if(v2.cpuType==1){
                           			img = "../images/topology/SW3.png";
                           		}else if(v2.cpuType==2){
                           			img = "../images/topology/FPGA3.png";
                           		}else if(v2.cpuType==3){
                           			img = "../images/topology/MSU3.png";
                           		}else if(v2.cpuType==4){
                           			img = "../images/topology/DSP3.png";
                           		}else if(v2.cpuType==5){
                           			img = "../images/topology/PPC3.png";
                           		}else if(v2.cpuType==6){
                           			img = "../images/topology/ARM3.png";
                           		}   
                                  addCanvasLevel3(k,k1,k2,img,v2);
                                  
                              });
                          }
                      });
                  }
                 
                 // drawCircles();

              });
              if(allIndexData != null && allIndexData.length>0){
                  for(var a1=0;a1<allIndexData.length;a1++){
                      if(allIndexData[a1].deviceTypeName=='machine_box'){
                          for(var l1=0;l1<canvasAllLevel1.length;l1++){
                              if(canvasAllLevel1[l1].machineBox.id==allIndexData[a1].deviceId){
                                  canvasAllLevel1[l1].x=allIndexData[a1].x;
                                  canvasAllLevel1[l1].y=allIndexData[a1].y;
                                  canvasAllLevel1[l1].width=allIndexData[a1].width;
                                  canvasAllLevel1[l1].height=allIndexData[a1].height;
                                  break;
                              }
                          }
                      }else if(allIndexData[a1].deviceTypeName=='board'){
                          for(var l2=0;l2<canvasAllLevel2.length;l2++){
                              if(canvasAllLevel2[l2].board.id==allIndexData[a1].deviceId){
                                  canvasAllLevel2[l2].x_+=allIndexData[a1].x-canvasAllLevel2[l2].x;
                                  canvasAllLevel2[l2].y_+=allIndexData[a1].y-canvasAllLevel2[l2].y;
                                  canvasAllLevel2[l2].x=allIndexData[a1].x;
                                  canvasAllLevel2[l2].y=allIndexData[a1].y;
                                  canvasAllLevel2[l2].width=allIndexData[a1].width;
                                  canvasAllLevel2[l2].height=allIndexData[a1].height;
                                  break;
                              }
                          }
                      }else if(allIndexData[a1].deviceTypeName=='cpu'){
                          for(var l3=0;l3<canvasAllLevel3.length;l3++){
                              if(canvasAllLevel3[l3].params.id==allIndexData[a1].deviceId){
								for(var l33=0;l33<canvasAllLevel2.length;l33++){
									if(canvasAllLevel3[l3].params.boardId==canvasAllLevel2[l33].id){
                                	 	 canvasAllLevel3[l3].x_=allIndexData[a1].x-canvasAllLevel2[l33].x;
                                 		 canvasAllLevel3[l3].y_=allIndexData[a1].y-canvasAllLevel2[l33].y;
									}
								}                            	  
                                  canvasAllLevel3[l3].px_+=allIndexData[a1].x-canvasAllLevel3[l3].x;
                                  canvasAllLevel3[l3].py_+=allIndexData[a1].y-canvasAllLevel3[l3].y;
                                  canvasAllLevel3[l3].x=allIndexData[a1].x;
                                  canvasAllLevel3[l3].y=allIndexData[a1].y;
                                  canvasAllLevel3[l3].width=allIndexData[a1].width;
                                  canvasAllLevel3[l3].height=allIndexData[a1].height;
                                  break;
                              }
                          }
                      }
                  }
                //  drawCircles();

              }
           	//cpu连线
 		   	 $.ajax({url:'[[@{/physical_link/find_by_physical_topology_id}]]',
 		       	data:{id:id},
 		       	dataType:"JSON",
 		       	ContentType: "application/x-www-form-urlencoded",
 		       async:false,
 		       	type:"POST"
 		       }).done(function(resLines){
 		           if(resLines){
 		               var links = resLines.data;
 		               if(links&&links.length>0){
 		            	   straightLines=links;
 		            	   drawAllLine();
 		            	   for(var i=0;i<straightLines.length;i++){
 		            			if(straightLines[i].foldPoints!=null && straightLines[i].foldPoints.length>0){
 		            				straightLines[i].foldPoints.physicalLinkID=straightLines[i].id;
 		            				Polylines.push(straightLines[i].foldPoints);
 		            			}
 		            	   }
 		            	   oldPolyLInes=Polylines;
 		            	   viewPolyline();
 		   			}
 		   		}
                // drawCircles();

 		   	});
             drawCircles();
          }
      }
 	});
   function drawAllLine(){
	   Polylines=[];
	   for(var i=0;i<straightLines.length;i++){
    	var leftCpu = null;
        var rightCpu = null;
		var linkData={};	
		for(var k=0;k<canvasAllLevel3.length;k++){
        		var leftCpuId=straightLines[i].leftCpu.id;
        		if(canvasAllLevel3[k].id==leftCpuId){
        			leftCpu = canvasAllLevel3[k];
        		}
        		var rightCpuId=straightLines[i].rightCpu.id;
        		if(canvasAllLevel3[k].id==rightCpuId){
        			rightCpu = canvasAllLevel3[k];
        		}
        		if(leftCpu!=null && rightCpu!=null){
                  	linkData=straightLines[i];
        			doLine2(leftCpu , rightCpu,null, straightLines[i].leftPort , straightLines[i].rightPort ,{param:straightLines[i]});
                    drawCircles();
        			break;
        		}
        	}
   	  }
   } 
   //显示直线
   var showPolyline=false;
   
   function viewOld(){
	   var oldWidth=document.getElementsByTagName("canvas")[0].getAttribute("width");
		var oldHeight=document.getElementsByTagName("canvas")[0].getAttribute("height");
	  	$('#myCanvas').css("width",oldWidth);
	    $('#myCanvas').css("height",oldHeight);
   }
   //显示折线 
   function viewPolyline(){
	  
		if(oldDragLines.length>0){
			 var curnewLineObjs=lineObjs;
			   lineObjs=[];
				for(var j=0;j<curnewLineObjs.length;j++){
					var flag=true;
					for(var i=0;i<oldDragLines.length;i++){
					 	if(curnewLineObjs[j].param.id==oldDragLines[i].lineId ){
						 flag=false;
						 break;
				  	 }
				}
					if(flag){
					   lineObjs.push(curnewLineObjs[j]);
					}
			}
	      	drawCircles();
			addPolyline2(oldDragLines);
		}else if(Polylines.length>0){
			   var curnewLineObjs=lineObjs;
			   lineObjs=[];
			   for(var t2=0;t2<curnewLineObjs.length;t2++){
				   var flag=true;
					for(var i=0;i<Polylines.length;i++){
						if(curnewLineObjs[t2].param.id==Polylines[i].physicalLinkID){
						   flag=false;
						   break;
					   }
			   		}
					if(flag){
					   lineObjs.push(curnewLineObjs[t2]);
				   }
			   }
  		      	drawCircles();
				for(var j=0;j<Polylines.length;j++){
				   addPolyline(Polylines[j])
				}
		}else{
			  return;
		}
   }
    function back(){
       window.location.href="physical_topology_library";
    }
    function showBig(){
		window.location.href="physical_monitors2"
	}
    function lineSelect(){}
    function curdragCircle(curdragcircle){
    	
    }
    function saveAll(){
    	var polyline=[];
    	for(var l=0;l<dragLines.length;l++){
    		var curPolyline={};
    		if(dragLines[l].id!=null){
        		curPolyline.id=dragLines[l].id;
    		}
    		curPolyline.leftX=dragLines[l].leftX;
    		curPolyline.leftY=dragLines[l].leftY;
    		curPolyline.physicalLink={id:dragLines[l].lineId}
    		curPolyline.rightX=dragLines[l].rightX;
    		curPolyline.rightY=dragLines[l].rightY;
    		polyline.push(curPolyline);
    	}
    	
    	var curData={};
    	curData.topologyId=id;
    	curData.topologyTypeName=oldData.name;
    	curData.viewPostions=[];
    	for(var s1=0;s1<canvasAllLevel1.length;s1++){
    		var machineData={};
    		machineData.deviceId=canvasAllLevel1[s1].machineBox.id;
    		machineData.deviceTypeName='machine_box';
    		machineData.height=canvasAllLevel1[s1].height;
    		machineData.width=canvasAllLevel1[s1].width;
    		machineData.x=canvasAllLevel1[s1].x;
    		machineData.y=canvasAllLevel1[s1].y;
    		machineData.icon='';
    		machineData.opacity=0;
    		machineData.topologyId=id;
    		machineData.topologyTypeName=oldData.name;
    		curData.viewPostions.push(machineData);
    	}
    	for(var s2=0;s2<canvasAllLevel2.length;s2++){
    		var boardData={};
    		boardData.deviceId=canvasAllLevel2[s2].board.id;
    		boardData.deviceTypeName='board';
    		boardData.height=canvasAllLevel2[s2].height;
    		boardData.width=canvasAllLevel2[s2].width;
    		boardData.x=canvasAllLevel2[s2].x;
    		boardData.y=canvasAllLevel2[s2].y;
    		boardData.icon='';
    		boardData.opacity=0;
    		boardData.topologyId=id;
    		boardData.topologyTypeName=oldData.name;
    		curData.viewPostions.push(boardData);
    	}
    	for(var s3=0;s3<canvasAllLevel3.length;s3++){
    		var cpuData={};
    		cpuData.deviceId=canvasAllLevel3[s3].params.id;
    		cpuData.deviceTypeName='cpu';
    		cpuData.height=canvasAllLevel3[s3].height;
    		cpuData.width=canvasAllLevel3[s3].width;
    		cpuData.x=canvasAllLevel3[s3].x;
    		cpuData.y=canvasAllLevel3[s3].y;
    		cpuData.icon=canvasAllLevel3[s3].img;
    		cpuData.opacity=0;
    		cpuData.topologyId=id;
    		cpuData.topologyTypeName=oldData.name;
    		curData.viewPostions.push(cpuData);
    	}
		curData=JSON.stringify(curData);

    	$.ajax({
			url:'[[@{/view_position/clear_saves}]]',
			data:curData,
            contentType:"application/json",
			dataType:"JSON",
			type:"POST",
		}).done(function(data2){
			if(data2){
				alert('保存成功 ');
				if(polyline.length>0){
					polyline=JSON.stringify(polyline);
					$.ajax({
						url:'[[@{/link_fold_point/saves}]]',
						data:polyline,
			            contentType:"application/json",
						dataType:"JSON",
						type:"POST",
					}).done(function(data3){
						if(data3){
							alert("保存折线 ");
							delOldPolyLines();
						}
					});
				}
			}
		});
    }
   function delOldPolyLines(){
	   for(var i=0;i<oldPolyLInes.length;i++){
		   var curFoldPoints=oldPolyLInes[i];
		   for(var j=0;j<curFoldPoints.length;j++){
			   var flag=true; 
			   for(var k=0;k<dragLines.length;k++){
				   if(curFoldPoints[j].id==dragLines[k].id && dragLines[k].id!=null){
					   flag=false;
					   break;
				   }
			   }
			   if(flag){
				   delPolyline=curFoldPoints[j];
					$.ajax({
						url:'[[@{/link_fold_point/delete}]]',
						data:{id:delPolyline.id},
						dataType:"JSON",
						type:"POST",
					}).done(function(data3){
						if(data3){
							alert("删除折线 ");
						}
					});
			   }
		   }
	   }
   }
</script>
</html>
